<template>
	<div class="details-container p-4">
		<div class="bg-white">
			<div v-if="isShowTop" class="container-top flex items-center mx-4">
				<div class="title-container flex items-center" @click="back">
					<div class="bg-primary rounded-full w-5 h-5 flex items-center justify-center">
						<el-icon v-if="isShowBack" size="18" color="#fff"><Back /></el-icon>
					</div>
					<div class="pl-2 font-bold text-base leading-none">
						{{ title }}
					</div>
				</div>
				<div class="top-right">
					<slot name="top-right" />
				</div>
			</div>
			<div class="details-content" :style="bodyStyle" v-if="isShow">
				<slot />
			</div>

			<div
				v-if="!isDetails"
				class="container-bot flex items-center justify-center"
				:style="{
					paddingLeft: bodyStyle.paddingLeft,
				}"
			>
				<slot name="bot">
					<el-button type="primary" class="sure-btn" :disabled="submitDisabled" :loading="submitDisabled" @click="submit"> 确认 </el-button>
					<el-button type="default" class="cancel-btn" @click="back"> 取消 </el-button>
				</slot>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="DetailsContainer">
import { CSSProperties } from 'vue';
import { useRouter } from 'vue-router';

const props = withDefaults(
	defineProps<{
		title: string;
		bodyStyle?: CSSProperties;
		submitDisabled?: boolean;
		isDetails?: boolean;
		isShow?: boolean;
		onBack?: () => void;
		isShowTop?: boolean;
		isShowBack?: boolean;
	}>(),
	{
		title: '返回',
		bodyStyle: () => ({
			paddingLeft: '55px',
			paddingRight: '174px',
			paddingTop: '39px',
			paddingBottom: '39px',
		}),
		submitDisabled: false,
		isDetails: false,
		isShow: true,
		isShowTop: true,
		isShowBack: true,
	}
);

const router = useRouter();
const emits = defineEmits(['submit', 'back']);
function back() {
	if (!props.isShowBack) return;
	if (typeof props.onBack === 'function') {
		emits('back');
		return;
	}
	router.back();
}

function submit() {
	emits('submit');
}
</script>

<style lang="scss" scoped>
.container-top {
	position: sticky;
	top: 0;
	height: 54px;
	border-bottom: 1px solid #e6e6e6;
	z-index: 99;
	background: #fff;

	.title-container {
		cursor: pointer;
	}

	.top-right {
		position: absolute;
		right: 36px;
	}
}

.container-bot {
	width: 100%;
	height: 86px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 2px -5px 6px 0px rgba(0, 0, 0, 0.08);
	.sure-btn,
	.cancel-btn {
		width: 247px;
		height: 40px;
	}
}
</style>
